<script lang="ts" setup>
  import appStore from '@/store'
  import fleetDetails from '@/api/fleetDetails'
  import fleetService from '@/api/fleetsService'
  import autoScaling from '@/api/autoScaling'
  import { reactive, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { timeFormathmsUTC } from '@/utils/formatter'
  import rulesModification from '../modify/rulesModification.vue'
  import basicModification from '../modify/basicModification.vue'
  import configModification from '../modify/configModification.vue'
  import capacityModification from '../modify/capacityModification.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import ApplicationService, { App } from '@/api/applicationService'
  import _cloneDeep from 'lodash/cloneDeep'
  const route = useRoute()
  const router = useRouter()
  let fleetName = ref(route.params.name)
  const title = reactive(['基本信息', '入站规则', '应用运行配置', '容量信息'])
  let drawer = ref(false)
  let drawerType = ref()
  const basicModificationRef = ref(null)
  const rulesModificationRef = ref(null)
  const configModificationRef = ref(null)
  const capacityModificationRef = ref(null)
  const dialogVisible = ref(false)
  let keyValue = ref('')
  let tagValue = ref('')
  let userType = ref()
  userType.value = localStorage.getItem('UserType') as string
  const modify = (type: number) => {
    drawer.value = true
    drawerType.value = type
  }

  const closeDrawer = () => {
    drawer.value = false
  }

  const onSave = () => {
    if (drawerType.value == 0) {
      ;(basicModificationRef.value! as any).onSubmit()
    } else if (drawerType.value == 1) {
      ;(rulesModificationRef.value! as any).onSubmit()
    } else if (drawerType.value == 2) {
      ;(configModificationRef.value! as any).onSubmit()
    } else {
      ;(capacityModificationRef.value! as any).onSubmit()
    }
  }

  const onCancel = () => {
    ElMessageBox.confirm('请确定取消修改吗？', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'warning'
    })
      .then(() => {
        drawer.value = false
      })
      .catch(() => {})
  }
  const goback = () => {
    router.push({ name: 'runningState' })
  }
  // 修改
  const updateAlias = (row: any) => {
    sessionStorage.setItem('oldValue', row.value)
    tableData.forEach((item) => {
      if (item.Id != row.Id) {
        item.isEdit = false
      }
    })
    row.isEdit = true
  }
  const deleteAs = (row: any, index: number) => {
    ElMessageBox.confirm(`确认删除此条数据？\nKEY: ${row.key}\nVALUE: ${row.value} `, '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      obj.instance_tags.splice(index, 1)
      const param1 = {
        project_id: param.project_id,
        fleet_id: param.fleet_id,
        UpdateFleetRequestBody: {
          instance_tags: obj.instance_tags
        }
      }
      try {
        let res = await fleetService.updateBasicMsg(param1)
        if (res.status < 300) {
          ElMessage({
            message: '删除成功',
            type: 'success'
          })
          getFleet()
        }
      } catch (err) {
        obj.instance_tags.splice(index, 0, {
          key: row.key,
          value: row.value
        })
      }
    })
  }
  // 取消
  const closeRow = async (row: any) => {
    if (sessionStorage.getItem('oldValue') !== 'null') {
      row.value = sessionStorage.getItem('oldValue')
    }
    row.isEdit = false
  }
  // 保存
  const onSubmit = async (row: any, index: any) => {
    let example = {
      key: obj.instance_tags[index].key,
      value: obj.instance_tags[index].value
    }
    obj.instance_tags[index] = {
      key: row.key,
      value: row.value
    }
    const param1 = {
      project_id: param.project_id,
      fleet_id: param.fleet_id,
      UpdateFleetRequestBody: {
        instance_tags: obj.instance_tags
      }
    }

    try {
      let res = await fleetService.updateBasicMsg(param1)
      if (res.status < 300) {
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
        getFleet()
      }
    } catch (err) {
      obj.instance_tags[index] = {
        key: example.key,
        value: example.value
      }
    }
  }
  const param = reactive({
    project_id: appStore.userStore.project_id,
    fleet_id: '',
    policy_id: ''
  })

  let id = ref(`${route.params.id}`)
  param.fleet_id = id.value
  const basic = {
    fleet_id: 'Fleet ID',
    name: '名称',
    enterprise_project_id: '企业项目ID',
    description: '描述',
    state: '状态',
    fleet_state_reason: '状态原因',
    instance_count: '实例数量',
    instance_specification: '实例规格',
    process_count: '进程数量',
    server_session_count: '会话数量',
    max_server_session_num: '最大会话数量',
    bandwidth: '带宽',
    bandwidth_share_type: '带宽类型',
    server_session_protection_policy: '会话保护策略',
    server_session_protection_time_limit_minutes: '会话保护时长',
    operating_system: '操作系统',
    enable_auto_scaling: '是否自动伸缩',
    vpc_name: '虚拟私有云名称',
    subnet_name: '子网名称',
    creation_time: '创建时间',
    update_time: '更新时间'
  }
  const inbound = {
    protocol: '网络协议',
    ip_range: 'IP地址',
    from_port: '开始端口',
    to_port: '结束端口'
  }
  const runTime = {
    launch_path: '启动路径',
    parameters: '启动参数',
    concurrent_executions: '并发启动数量'
  }
  let tableData: Array<{ [key: string]: any }> = reactive([])
  let aliasTableData: Array<{ [key: string]: string }> = reactive([])
  let scalingTableData: Array<{ [key: string]: string }> = reactive([])
  let basicData: { [key: string]: { [key: string]: string | any } } = reactive({ data: {} })
  let inboundData: InboundData[] = reactive([])
  let runTimeData: { [key: string]: { [key: string]: any } } = reactive({ data: {} })
  let instanceCapData: { [key: string]: { [key: string]: number } } = reactive({ data: {} })
  let obj: { [key: string]: any } = {}
  let buildApp: App = {
    project_id: appStore.userStore.project_id,
    build_id: ''
  }
  let buildDetail: { [key: string]: string } = reactive({
    buildId: '',
    buildName: '',
    buildVersion: ''
  })
  let showEdit = ref(false)
  const getFleet = async () => {
    let res = await fleetDetails.getFleet(param)
    if (res.status == 200) {
      tableData.length = 0
      let tableAll = res.data
      obj = JSON.parse(JSON.stringify(tableAll))
      if (res.data.instance_tags) {
        tableData.push(...res.data.instance_tags)
      } else {
        obj.instance_tags = []
      }
      aliasTableData.length = 0
      if (res.data.associated_alias) {
        aliasTableData.push(...res.data.associated_alias)
      }
      basicData.data = res.data
      if (basicData.data.state === 'ACTIVE') {
        showEdit.value = true
      }
      buildApp.build_id = res.data.build_id
      getApplication()
    }
  }
  const getFleetScaling = async () => {
    let res = await autoScaling.getFleetScaling(param)
    if (res.status == 200) {
      scalingTableData.length = 0
      scalingTableData.push(...res.data.associated_policy_of_fleet_list)
    }
  }
  const toAlias = (id: string) => {
    router.push({ name: 'aliasDetail', params: { id } })
  }
  const toScaling = (id: string) => {
    router.push({ name: 'autoScalingDetails', params: { id } })
  }
  const getApplication = async () => {
    if (buildApp.build_id) {
      let res = await ApplicationService.getApplicationDetail(buildApp)
      if (res.status == 200) {
        buildDetail.buildId = buildApp.build_id
        buildDetail.buildName = res.data.build.name
        buildDetail.buildVersion = res.data.build.version
      }
    }
  }

  const getInbound = async () => {
    let res = await fleetDetails.getInbound(param)
    inboundData.length = 0
    inboundData.push(...res.data.inbound_permissions)
  }
  const getRunTiem = async () => {
    let res = await fleetDetails.getRunTiem(param)
    runTimeData.data = res.data.runtime_configuration
  }
  const getInstanceCap = async () => {
    let res = await fleetDetails.getInstanceCap(param)
    instanceCapData.data = res.data.instance_capacity
  }
  const newData = async () => {
    if (keyValue.value) {
      let exampleData = {
        key: keyValue.value,
        value: tagValue.value
      }
      obj.instance_tags.push(exampleData)
      const param1 = {
        project_id: param.project_id,
        fleet_id: param.fleet_id,
        UpdateFleetRequestBody: {
          instance_tags: obj.instance_tags
        }
      }
      try {
        let res = await fleetService.updateBasicMsg(param1)
        if (res.status == 204) {
          ElMessage({
            message: '创建成功',
            type: 'success'
          })
          dialogVisible.value = false
          getFleet()
          keyValue.value = ''
          tagValue.value = ''
        }
      } catch (err) {
        obj.instance_tags.pop()
      }
    }
  }

  const goToBuild = (id: string) => {
    router.push({
      name: 'applicationDetail',
      params: {
        id
      }
    })
  }
  const isMSbrowser = () => {
    const userAgent = window.navigator.userAgent
    return userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Trident') !== -1
  }

  const saveJSON = (title: any, data: any) => {
    let reTitle = title + '.json'
    let dataStr = data ? JSON.stringify(data) : ''
    const nav = window.navigator as any
    return isMSbrowser()
      ? new Promise<void>((resolve) => {
          // Edge、IE11
          let blob = new Blob([dataStr], { type: 'text/plain;charset=utf-8' })
          if (nav.msSaveBlob) {
            nav.msSaveBlob(blob, reTitle)
          }
          resolve()
        })
      : new Promise<void>((resolve) => {
          // Chrome、Firefox
          let a = document.createElement('a')
          a.href = 'data:text/json;charset=utf-8,' + dataStr
          a.download = reTitle
          a.click()
          resolve()
        })
  }
  const output = () => {
    let obj = _cloneDeep(basicData.data)
    obj.inbound_permissions = inboundData
    obj.runtime_configuration = runTimeData.data
    obj.scaling_group_capacity = instanceCapData.data
    saveJSON(fleetName.value, obj).then(() => {
      ElMessage({
        message: '导出成功！',
        type: 'success'
      })
    })
  }
  let isShowTooptip = ref<Boolean>(false)
  const visibilityChange = (event: any) => {
    const ev = event.target
    const evWeight = ev.scrollWidth
    const contentWeight = ev.clientWidth
    if (evWeight > contentWeight) {
      isShowTooptip.value = true
    } else {
      isShowTooptip.value = false
    }
  }
  getFleet()
  getInbound()
  getRunTiem()
  getInstanceCap()
  getFleetScaling()
  interface InboundData {
    protocol?: string
    ip_range?: string
    from_port?: number
    to_port?: number
  }
</script>
<template>
  <div id="fleetdetails">
    <div class="title-box">
      <div class="nav-box">
        <span>运行状态</span><span class="split">></span><span>Fleet</span><span class="split">></span><span>{{ fleetName }}详情</span>
        <span class="back" @click="goback">&nbsp;&nbsp;&lt;&nbsp;返回</span>
      </div>
      <button @click="output" class="btn new" v-if="userType >= 5">导出</button>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">基本信息</div>
        <div class="header-change" @click="modify(0)" v-if="showEdit && userType >= 5">修改></div>
      </div>
      <div class="card-content">
        <div class="content-box" v-for="(item, key) in basic" :key="key">
          <div class="content-label">{{ item }}</div>
          <div class="content-text" v-if="key == 'enable_auto_scaling'">{{ (basicData.data[key] ? '是' : '否') || '--' }}</div>
          <div class="content-text" v-else-if="['creation_time', 'update_time'].includes(key) && basicData">{{ timeFormathmsUTC(basicData.data[key]) }}</div>
          <div class="content-text" v-else-if="key == 'server_session_protection_time_limit_minutes' && basicData">
            {{ basicData.data[key] ? `${basicData.data[key]}分钟` : '--' }}
          </div>
          <div class="content-text" v-else-if="key == 'bandwidth' && basicData">
            {{ basicData.data[key] ? `${basicData.data[key]}Mbit/s` : '--' }}
          </div>
          <div
            class="content-text"
            v-else-if="key == 'process_count' || key == 'instance_count' || key == 'server_session_count' || key == 'max_server_session_num'"
          >
            {{ basicData.data[key] == '0' ? 0 : basicData.data[key] }}
          </div>
          <template v-else>
            <el-tooltip effect="dark" placement="bottom" :disabled="!isShowTooptip">
              <template #content>
                <div slot="content" style="width: 360px">{{ basicData.data[key] }}</div>
              </template>
              <div class="creation" @mouseenter="visibilityChange($event)">
                {{ basicData.data[key] ? $t(basicData.data[key]) : basicData.data[key] || '--' }}
              </div>
            </el-tooltip>
          </template>
        </div>
        <div class="instanceLabel">
          <div class="labelTag">实例标签<span class="line" @click="dialogVisible = true" v-if="userType >= 5">+新增</span></div>
          <el-table :data="tableData" style="width: 100%; margin: -4px 0 25px 0" :header-cell-style="{ color: '#8a8e99', 'font-weight': 500 }" :border="true">
            <el-table-column prop="key" label="标签键"> </el-table-column>
            <el-table-column prop="value" label="标签值">
              <template #default="scope">
                <div class="id-box" v-if="!scope.row.isEdit">
                  {{ scope.row.value }}
                </div>
                <div class="change" v-else>
                  <el-input v-model="scope.row.value" />
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" v-if="userType >= 5">
              <template #default="scope">
                <div v-if="!scope.row.isEdit" class="actions-box">
                  <div class="actions-details" @click="updateAlias(scope.row)">修改</div>
                  <div class="line"></div>
                  <div class="actions-delete" @click="deleteAs(scope.row, scope.$index)">删除</div>
                </div>
                <div v-else class="actions-box">
                  <div class="actions-details" @click="onSubmit(scope.row, scope.$index)">保存</div>
                  <div class="line"></div>
                  <div class="actions-details" @click="closeRow(scope.row)">取消</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">应用包信息</div>
        <div class="header-change"></div>
      </div>
      <div class="card-content">
        <div class="lv2-content-box">
          <div class="content-label">id</div>
          <div class="content-text applicationId" @click="goToBuild(buildDetail.buildId)">{{ buildDetail.buildId || '--' }}</div>
        </div>
        <div class="lv2-content-box">
          <div class="content-label">名称</div>
          <div class="content-text">{{ buildDetail.buildName || '--' }}</div>
        </div>
        <div class="lv2-content-box">
          <div class="content-label">版本号</div>
          <div class="content-text">{{ buildDetail.buildVersion || '--' }}</div>
        </div>
      </div>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">入站规则</div>
        <div class="header-change" @click="modify(1)" v-if="showEdit && userType >= 5">修改></div>
      </div>
      <div class="securityGroup">
        <div class="securityNames">安全组名称</div>
        <div class="singleGroup">
          <div v-if="!basicData.data.security_group_names">{{ '--' }}</div>
          <div v-else class="adaptive" v-for="item in basicData.data.security_group_names">{{ item }}</div>
        </div>
      </div>
      <div class="card-table">
        <div class="content-table">
          <div class="table-title" v-for="p in inbound" :key="p">{{ p }}</div>
        </div>
        <div class="content-table-body">
          <div class="body-table noData" v-if="inboundData.length == 0">暂无数据</div>
          <div v-else class="body-table" v-for="(item, index) in inboundData" :key="index">
            <div v-for="(p, key) in inbound" :key="key" class="table-title">{{ item[key] }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">应用运行配置</div>
        <div class="header-change" @click="modify(2)" v-if="showEdit && userType >= 5">修改></div>
      </div>
      <div class="card-content">
        <div class="lv2-content-box">
          <div class="content-label">会话激活超时时间</div>
          <div class="content-text">{{ `${runTimeData.data.server_session_activation_timeout_seconds}秒` }}</div>
        </div>
        <div class="lv2-content-box">
          <div class="content-label">应用最大会话数</div>
          <div class="content-text">{{ runTimeData.data.max_concurrent_server_sessions_per_process }}</div>
        </div>
      </div>
      <div class="lv2-title">应用进程启动配置：</div>
      <div class="card-table">
        <div class="content-table">
          <div class="table-title" v-for="p in runTime" :key="p">{{ p }}</div>
        </div>
        <div class="content-table-body">
          <div class="body-table noData" v-if="runTimeData.data.process_configurations == 0">暂无数据</div>
          <div v-else class="body-table" v-for="(item, index) in runTimeData.data.process_configurations" :key="index">
            <div v-for="(p, key) in runTime" :key="key" class="table-title">{{ item[key] || '--' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">容量信息</div>
        <div class="header-change" @click="modify(3)" v-if="showEdit && userType >= 5">修改></div>
      </div>
      <div class="card-content">
        <div class="lv2-content-box">
          <div class="content-label">最小实例数</div>
          <div class="content-text">{{ instanceCapData.data.min_instance_number }}</div>
        </div>
        <div class="lv2-content-box">
          <div class="content-label">最大实例数</div>
          <div class="content-text">{{ instanceCapData.data.max_instance_number }}</div>
        </div>
      </div>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">已关联别名</div>
      </div>
      <div class="card-content">
        <div class="alias-table">
          <el-table
            :data="aliasTableData"
            style="width: 100%"
            :header-cell-style="{ background: '#f4f5f8', color: '#252b3a' }"
            :border="true"
            :default-sort="{ prop: 'creation_time', order: 'descending' }"
          >
            <el-table-column label="别名名称" width="200">
              <template #default="scope">
                <div class="toDetails" @click="toAlias(scope.row.alias_id)">
                  {{ scope.row.alias_name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="alias_id" label="别名ID" />
            <el-table-column label="别名状态">
              <template #default="scope">
                {{ scope.row.status ? $t(scope.row.status) : '' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="details-card">
      <div class="card-header">
        <div class="header-bar"></div>
        <div class="header-title">已关联伸缩策略</div>
      </div>
      <div class="card-content">
        <div class="alias-table">
          <el-table
            :data="scalingTableData"
            style="width: 100%"
            :header-cell-style="{ background: '#f4f5f8', color: '#252b3a' }"
            :border="true"
            :default-sort="{ prop: 'creation_time', order: 'descending' }"
          >
            <el-table-column label="策略名称" width="200">
              <template #default="scope">
                <div class="toDetails" @click="toScaling(scope.row.id)">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="策略类型">
              <template #default="scope">
                {{ scope.row.policy_type ? $t(scope.row.policy_type) : '' }}
              </template>
            </el-table-column>
            <el-table-column label="指标名称">
              <template #default="scope">
                {{ scope.row.target_based_configuration.metric_name ? $t(scope.row.target_based_configuration.metric_name) : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="target_based_configuration.min_target_value" label="最小可用会话比" />
            <el-table-column prop="target_based_configuration.max_target_value" label="最大可用会话比" />
          </el-table>
        </div>
      </div>
    </div>
    <el-drawer v-model="drawer" direction="rtl" @click="drawer = true" destroy-on-close>
      <template #header>
        <h4 class="drawerTitle">修改&nbsp;-&nbsp;{{ title[drawerType] }}</h4>
      </template>
      <basic-modification v-if="drawerType == 0" :fleetId="id" ref="basicModificationRef" @close="closeDrawer" @get="getFleet"></basic-modification>
      <rules-modification v-else-if="drawerType == 1" :fleetId="id" ref="rulesModificationRef" @close="closeDrawer" @get="getInbound"></rules-modification>
      <config-modification v-else-if="drawerType == 2" :fleetId="id" ref="configModificationRef" @close="closeDrawer" @get="getRunTiem"></config-modification>
      <capacity-modification v-else :fleetId="id" ref="capacityModificationRef" @close="closeDrawer" @get="getInstanceCap"></capacity-modification>
      <template #footer>
        <div class="footerButton">
          <el-button class="btn button" @click="onCancel">取消</el-button>
          <el-button class="btn new button" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <el-dialog title="新增实例标签" v-model="dialogVisible" width="25%" center>
      <el-form>
        <el-form-item label="标签键" prop="key">
          <el-input type="text" v-model="keyValue"></el-input>
        </el-form-item>
        <el-form-item label="标签值" prop="value">
          <el-input type="text" v-model="tagValue"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="newData()">创建</el-button>
          </span>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  @import '@/assets/scss/dropdownBox.scss';
  #fleetdetails {
    margin-top: 60px;
    .creation {
      width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    .title-box {
      justify-content: space-between;
      .btn {
        width: 50px;
        height: 25px;
        margin-right: 20px;
      }
      .nav-box {
        margin-left: 20px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        .split {
          margin: 0 8px;
        }
      }
    }
    .details-card {
      background-color: $blank-color;
      padding: 30px 30px 10px 30px;
      .securityGroup {
        display: flex;
        margin-top: 20px;
        .securityNames {
          color: #8a8e99;
          font-size: 14px;
          margin-left: 10px;
        }
        .singleGroup {
          flex-direction: column;
          margin-left: 40px;
          height: auto;
          .adaptive {
            height: 26px;
            color: #252b3a;
            font-size: 14px;
          }
        }
      }
      .card-header {
        display: flex;
        align-items: center;
        height: 14px;

        .header-bar {
          height: 100%;
          width: 4px;
          background: $main-color;
          margin-right: 6px;
        }
        .header-title {
          height: 100%;
          line-height: 100%;
          color: #1d1d1f;
          font-weight: bold;
          font-size: 14px;
          margin-right: 10px;
        }
        .header-change {
          height: 100%;
          line-height: 100%;
          font-size: 14px;
          color: $main-color;
          cursor: pointer;
        }
      }
      .lv2-title {
        height: 14px;
        line-height: 14px;
        color: #1d1d1f;
        font-weight: bold;
        font-size: 14px;
        margin-left: 10px;
        margin-bottom: -10px;
      }
      .card-content {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        margin: 30px 0 0 10px;
        .alias-table {
          width: 100%;
          margin-bottom: 30px;
        }
        :deep(.toDetails) {
          color: $main-color;
          cursor: pointer;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .instanceLabel {
          width: 100%;
          display: flex;
          .labelTag {
            width: 160px;
            color: #8a8e99;
            .line {
              border: 1px solid #8a8e99;
              margin-left: 10px;
              padding: 2px 14px;
              cursor: pointer;
              background: $main-color;
              border: 1px solid $main-color;
              color: #fff;
            }
          }
        }
        .content-box {
          width: 50%;
          display: flex;
          min-height: 16px;
          line-height: 14px;
          margin-bottom: 30px;
          .content-label {
            width: 130px;
            margin-right: 30px;
            color: $action-color;
          }
          .content-text {
            width: 480px;
            color: $text-color;
            word-break: break-all;
          }
        }
        .lv2-content-box {
          min-height: 14px;
          line-height: 14px;
          display: flex;
          margin-bottom: 30px;
          .content-label {
            margin-right: 30px;
            color: $action-color;
          }
          .content-text {
            color: $text-color;
            word-break: break-all;
          }
          .applicationId {
            cursor: pointer;
            color: $main-color;
          }
        }
        .lv2-content-box:first-child {
          width: 550px;
        }
        .lv2-content-box:nth-child(2) {
          width: 560px;
        }
      }
      .card-table {
        margin: 20px 0 20px 0;
        padding: 0 10px;
        border: 1px solid $border-color;
        border-radius: 2px;
        font-size: 14px;
        .content-table {
          display: flex;
          align-items: center;
          height: 34px;
          border-bottom: 1px solid $border-color;
          color: $action-color;
        }

        .noData {
          justify-content: center;
          color: #8a8e99 !important;
        }
        .body-table {
          height: 50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid $border-color;
          color: $text-color;
        }
        .table-title:first-child {
          width: 550px;
        }
        .table-title:nth-child(2) {
          width: 560px;
        }
        .table-title:nth-child(3) {
          width: 230px;
        }
        .body-table:last-child {
          border: none;
        }
      }
    }
    .details-card:not(:first-child) {
      margin-top: 20px;
    }

    :deep(.el-drawer__header) {
      .drawerTitle {
        color: #252b3a;
        font-size: 18px;
        font-weight: bold;
        line-height: 38px;
      }
      border: 1px solid #e0e2e9;
      padding: 20px 40px 20px 40px;
      margin-bottom: 0px;
    }

    :deep(.el-drawer__body) {
      padding: 30px 40px 30px 40px;
    }

    :deep(.el-drawer__footer) {
      border: 1px solid #e0e2e9;
      height: 90px;
      padding: 0;
      .footerButton {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 25px 40px 33px auto;
        .button {
          width: 120px;
          height: 32px;
        }
      }
    }
    :deep(.cell) {
      padding-left: 10px;
    }
  }
</style>
